<template>
  <div class="auth-manage">
    <el-row class="header">
      <el-col :span="12">
        <div class="title">人员关系</div>
      </el-col>
      <el-col :span="12">
        <div class="search">
          <el-input placeholder="请输入内容" class="input" v-model="searchInput">
            <el-button slot="append" class="search-btn" @click="searchMember">搜 索</el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row class="auth-body">
      <el-col :span="24">
        <div class="tab-header">
          <div :class="tabActiveIndex == 1 ? 'tab-title tab-active': 'tab-title'" title="成员管理" data-index="1" @click="tabClick(1)">
            <span>成员管理</span>
          </div>
          <div :class="tabActiveIndex == 2 ? 'tab-title tab-active': 'tab-title'" title="成员管理" data-index="2" @click="tabClick(2)">
            <span>人员审核</span>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <memberList v-show="tabActiveIndex == 1" ref="memberList"/>
        <memberAudit v-if="tabActiveIndex == 2" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import memberList from './member-list'
import memberAudit from './memeber-audit'
import { mapGetters } from 'vuex'

export default {
  name: 'AuthManage',
  components: {
    memberList,
    memberAudit
  },
  data() {
    return {
      tabActiveIndex: 1,
      searchInput: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    // tab切换
    tabClick(index) {
      this.tabActiveIndex = index
    },
    // 搜索
    searchMember() {
      if(this.tabActiveIndex == 1) {
        this.$refs.memberList.searchMemberList(this.searchInput)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.auth-manage {
  background-color: #F0F2F5;
}
.header {
  height: 98px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  border-top: 1px solid #eee;
  color: rgba(0, 0, 0, 0.85);
  background-color: #fff;
  line-height: 98px;
  .title {
    padding: 0 0 0 53px;
    box-sizing: border-box;
  }
  .search {
    padding: 30px 30px 30px 0;
    height: 98px;
    box-sizing: border-box;
    text-align: right;
    .input {
      width: 430px;
      vertical-align: top;
      .search-btn {
        width: 70px;
        height: 40px;
        padding: 0;
        background: #015DFF;
        border-radius: 0px 4px 4px 0px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        line-height: 40px;
        font-family: PingFangSC-Regular, PingFang SC;
        vertical-align: top;
      }
    }
  }
}
.auth-body {
  padding: 18px 30px;
  .tab-header {
    background-color: #F0F2F5;
    height: 54px;
    .tab-title{
      display: inline-block;
      min-width: 74px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      background-color: #F0F2F5;
      span{
        display: inline-block;
        height: 100%;
        margin: 0 25px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.85);
        cursor: pointer;
      }
    }
    .tab-title.tab-active{
      background: #fff;
      border-radius: 10px 10px 2px 2px;
      span{
        color: #015DFF;
        border-bottom: 2px solid #015DFF;
      }
    }
  }
}
</style>
